<template>
    <div class="container">
      <!-- 搜索区域 -->
      <el-row>
        <el-form :inline="true">
          <el-form-item label="请选择收费类型" label-width="80px">
            <el-select v-model="type_id" filterable clearable placeholder="请选择" @change="onTypeChange"
            @clear="onClear">
              <el-option
                v-for="item in chargeTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="consult_name" placeholder="请输入咨询师名称" clearable @clear="onClear1" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button type="primary" @click="toAddcharge">新增收费标准</el-button>
          </el-form-item>
        </el-form>
      </el-row>
  
      <!-- 表格区域 -->
      <el-table :data="chargeList" border style="width: 100%">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="chargetype.name" label="类型名称"></el-table-column>
        <el-table-column prop="chargeprice" label="费用"></el-table-column>
        <el-table-column prop="countnumber" label="咨询人数"></el-table-column>
        <el-table-column prop="consult.name" label="咨询师名称"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link type="primary" @click="toEditcharge(scope.row)">编辑</el-link>
            <el-link type="primary" @click="toDeletecharge(scope.row.id)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum" :page-sizes="[4, 6, 8, 10]" :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
  
      <!-- 新增和修改的对话框 -->
      <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="cancel">
        <el-form :model="charge">
          <el-form-item label="收费价格" label-width="80px">
            <el-input placeholder="请输入收费价格" v-model="charge.chargeprice"></el-input>
          </el-form-item>
  
          <el-form-item label="收费类型" label-width="80px">
            <el-select v-model="queryInfo.type_id" filterable clearable placeholder="请选择" @change="onTypeChange"
            @clear="onClear">
              <el-option
                v-for="item in chargeTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
  
          <el-form-item label="咨询师信息" label-width="80px">
            <el-select v-model="queryInfo.consult_id" filterable placeholder="请选择">
              <el-option
                v-for="item in consultList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
  
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="addcharge">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        queryInfo: {
          type_id: '',
          consult_id:'',
          consult_name: '',
          pageNum: 1,
          pageSize: 4
        },
        type_id:'',
        total: 0,
        chargeList: [],
        consult_name:'',
        chargeTypeList: [],
        consultList: [],
        dialogFormVisible: false,
        title: '新增费用',
        charge: {
        "id":'',
        "chargeprice":'',
        "countnumber":'',
        "consultId": '', 
        "typeId": '', 
        "chargetype":{
            "id":'',
            "name":''
        },
        "consult":{
            "id":'',
            "name":''
        }
       
        }
      };
    },
    methods: {

    // 当收费类型变化时自动搜索
  onTypeChange() {
    this.queryInfo.typeId = this.type_id;
    this.queryList();  // 调用查询列表的方法
  },
  
  // 当选择框清空时，重置类型ID并查询全部数据
  onClear1(){
    this.consult_name='';
    this.queryInfo.consult_name='';
    this.queryList();  // 查询全部数据
  },
  onClear() {
    
    this.type_id = '';  // 重置选择
    this.queryInfo.typeId = '';  // 重置查询条件
    this.queryList();  // 查询全部数据
  },
      search() {
          this.queryInfo.consult_name = this.consult_name;
          console.log(this.queryInfo);
        this.queryInfo.typeId = this.type_id;
        this.queryInfo.pageNum = 1;

        this.queryList();
      },
      // queryListByName(){
      //   this.$http.get('charge/selectAllbyConsultName', { params: this.queryInfo })
      //     .then(resp => {
      //       if (resp.data.status === 200) {
      //         this.chargeList = resp.data.data.list;
      //         this.total = resp.data.data.total;
      //       } else {
      //         this.$message.error('查询失败！');
      //       }
      //     });
      // },
      queryList() {
        this.$http.get('charge/selectAll', { params: this.queryInfo })
          .then(resp => {
            if (resp.data.status === 200) {
              this.chargeList = resp.data.data.list;
              this.total = resp.data.data.total;
            } else {
              this.$message.error('查询失败！');
            }
          });
      },
      querychargeType() {
        this.$http.get('chargetype/selectAll')
          .then(resp => {
            if (resp.data.status === 200) {
              this.chargeTypeList = resp.data.data.list;
            } else {
              this.$message.error('查询收费类型失败！');
            }
          });
      },
      queryConsult() {
        this.$http.get('charge/selectAllConsult')
          .then(resp => {
            if (resp.data.status === 200) {
              this.consultList = resp.data.data;
            } else {
              this.$message.error('查询咨询师信息失败！');
            }
          });
      },
      addcharge() {
        this.charge.consultId = this.queryInfo.consult_id;
        this.charge.typeId = this.queryInfo.type_id;
        const api = this.charge.id ? 'charge/update' : 'charge/insert';
        this.$http.post(api, this.charge)
          .then(resp => {
            if (resp.data.status === 200) {
              this.$message.success(this.charge.id ? '修改成功！' : '添加成功！');
              this.dialogFormVisible = false;
              this.queryList();
            } else {
              this.$message.error('接口异常！');
            }
          });
      },
      toDeletecharge(id) {
        this.$http.get('charge/delete?id='+id)
          .then(resp => {
            if (resp.data.status === 200) {
              this.$message.success('删除成功！');
              this.queryList();
            } else {
              this.$message.error('删除失败！');
            }
          });
      },
      toEditcharge(row) {
        this.charge = { ...row };
        this.queryInfo.type_id = row.chargetype.id;
  this.queryInfo.consult_id = row.consult.id;
        this.title = '修改费用';
        this.dialogFormVisible = true;
      },
      toAddcharge() {
        this.title = '新增费用';
        this.dialogFormVisible = true;
      },
      cancel() {
        this.dialogFormVisible = false;
        this.resetForm();
      },
      resetForm() {
        this.charge = {
          id: '',
          chargePrice: '',
          type_id: '',
          consult_id: ''
        };
      },
      handleSizeChange(size) {
        this.queryInfo.pageSize = size;
        this.queryList();
      },
      handleCurrentChange(num) {
        this.queryInfo.pageNum = num;
        this.queryList();
      }
    },
    mounted() {
      this.queryList();
      this.querychargeType();
      this.queryConsult();
    }
  };
  </script>
  
  <style>
  .el-pagination {
    margin-top: 15px;
  }
  
  .el-link {
    padding: 0 5px;
  }
  </style>
  